<script setup>
import { ref, reactive, } from 'vue'
import { CaretTop, CaretBottom, Star, StarFilled } from "@element-plus/icons-vue";
const data = reactive({
    // showFi工产ltet:false, //是否显示筛选框
    maxPrice: '',
    minParice: '',
    showSearchHistory: false,
    activeNav: 0,  //shaixunList的当前项
    shaixunList: ['首页', '全部商品', '价格',],
    shaixunList1: ['综合排序', '销量', '价格'],
    shaixunList2: ['综合排序', '成交量', '筛选'],
    filtetTime: [
        { name: "小于1年" },
        { name: "1～2年" },
        { name: "2～3年" },
        { name: "3～4年" },
        { name: "4年以上" },
    ],
    filtettotal: [
        { name: "0～5k" },
        { name: "5k～1w" },
        { name: "1w～2w" },
        { name: "2w～4w" },
        { name: "4w以上" },
    ],
});
// defineProps({
//     msg: String,
// })

const active = ref(0)
</script>

<template>

    <div class="wrapCenter" style="margin-top: 20px;">
        <div class="">
            <div>
                <div class="topsearch">
                    <div class="flexJBC">
                        <div class="left flex">
                            <img src="../../assets/logo.png" alt="">
                            <div class="store flexJBC">
                                <div class="left">
                                    <div class="flex">
                                        <img src="../../assets/Image/5494c0fa4c8d21450ef7357d0929a5d8.jpeg" alt=""
                                            class="storeImg">
                                        <div class="co6 fontS22">
                                            <div class="flex">
                                                <div>NETSEA 官方旗舰店</div>
                                                <div class="fontS16 co9" style="margin-left:101px">8.4万人关注</div>
                                            </div>
                                            <div class="flex">
                                                <div class="flex" style="margin:30px 0px 0px ;">
                                                    <el-icon size="23" color="#FFC047" v-for="item in 4" :key="item">
                                                        <StarFilled />
                                                    </el-icon>
                                                    <el-icon size="20" color="#ccc">
                                                        <Star />
                                                    </el-icon>
                                                    <span class="fontS20" style="color:#FFC047">4分</span>
                                                    <div class="fontS18 cof favi" style="margin-left:101px">+关注</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div>

                                </div>

                            </div>
                        </div>

                        <div class="right flex">
                            <div>
                                <div class="inputBox flex">
                                    <input type="text" placeholder="请输入商品名称" />
                                    <div class="seacrhIcon cur">
                                        <img src="../../assets/search.png">
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>

                </div>
                <div class="navTag co6 fontS20 flex">
                    <span @click="active = 0; data.activeNav = 0"
                        :class="active == 0 ? 'activetag cur' : 'cur'">首页</span>
                    <span @click="active = 1; data.activeNav = 0"
                        :class="active == 1 ? 'activetag cur' : 'cur'">全部商品</span>

                </div>
                <div class="paixuBox flex fontS16 co6" v-if="active == 1">
                    <div v-for="(item, index) in data.shaixunList1" :key="index" @click="data.activeNav = index"
                        class=" cur flexCenter  li center" :class="data.activeNav == index ? 'active' : ''">
                        <span> {{ item }}</span>
                        <div v-if="index == 2">
                            <div style="marginBottom:-10px"><el-icon size="8" color="#666">
                                    <CaretTop />
                                </el-icon></div>
                            <el-icon size="8" color="#666">
                                <CaretBottom />
                            </el-icon>
                        </div>

                    </div>
                    <div class="priceBox co6 flex">
                        <span>价格区间：</span>
                        <el-input v-model="data.minParice"
                            style="box-shadow:none;width: 90px;background: #F5F5F5;border: 1px solid #CCCCCC;">
                            <template #prepend style="background:none">￥</template>
                        </el-input>
                        <div style="padding:0 10px"> - </div>
                        <el-input v-model="data.maxPrice"
                            style="box-shadow:none;width: 90px;background: #F5F5F5;border: 1px solid #CCCCCC;">
                            <template #prepend style="background:none">￥</template>
                        </el-input>
                    </div>

                    <div class="btn cof fontS16">确认</div>


                </div>
                <div>
                    <div class="home" v-if="active == 0">
                        <img src="../../assets/Image/5494c0fa4c8d21450ef7357d0929a5d8.jpeg" alt="">
                        <div class="titlebox cof">商品推荐</div>

                        <div class="list flexJBC">
                            <el-row :gutter="20">
                                <el-col :span="6" v-for="item in 8" :key="item">
                                    <div class="li">
                                        <img src="../../assets/Image/5494c0fa4c8d21450ef7357d0929a5d8.jpeg" alt="">
                                        <div class="title elipes2 co3 fonrS22">纯棉重工连帽卫衣女秋冬慵懒加绒加厚字母印花外套</div>
                                        <div class="flex">
                                            <span class="homeRed fontS12">￥</span>
                                            <span class="homeRed fontS28">27.00</span>
                                            <span class="fontS18 co9" style="margin-left:14px">340人付款</span>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>

                        <div class="titlebox cof">新品上市</div>

                        <div class="list flexJBC">
                            <el-row :gutter="20">
                                <el-col :span="6" v-for="item in 8" :key="item">
                                    <div class="li">
                                        <img src="../../assets/Image/5494c0fa4c8d21450ef7357d0929a5d8.jpeg" alt="">
                                        <div class="title elipes2 co3 fonrS22">纯棉重工连帽卫衣女秋冬慵懒加绒加厚字母印花外套</div>
                                        <div class="flex">
                                            <span class="homeRed fontS12">￥</span>
                                            <span class="homeRed fontS28">27.00</span>
                                            <span class="fontS18 co9" style="margin-left:14px">340人付款</span>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>

                    </div>
                    <div class="list flexJBC">
                            <el-row :gutter="20">
                                <el-col :span="6" v-for="item in 8" :key="item">
                                    <div class="li">
                                        <img src="../../assets/Image/5494c0fa4c8d21450ef7357d0929a5d8.jpeg" alt="">
                                        <div class="title elipes2 co3 fonrS22">纯棉重工连帽卫衣女秋冬慵懒加绒加厚字母印花外套</div>
                                        <div class="flex">
                                            <span class="homeRed fontS12">￥</span>
                                            <span class="homeRed fontS28">27.00</span>
                                            <span class="fontS18 co9" style="margin-left:14px">340人付款</span>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                </div>

            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.store {


    .left {
        .storeImg {
            width: 80px;
            height: 80px;
            background: #E8E8E8;
            opacity: 1;
            border: 1px solid #CCCCCC;
            margin-right: 20px;
        }
    }

    align-items: flex-start;
    padding: 40px 0;
}

.home {
    img {
        width: 1472px;
        height: 340px;
        background: #E3E3E3;
        margin: 20px 0;
    }

    .titlebox {
        width: 1472px;
        height: 40px;
        background: #DD2131;
        padding-left: 20px;
        line-height: 40px;
        margin-bottom: 20px;
    }
}

.list {

    flex-wrap: wrap;
    padding: 0 40px;
    box-sizing: border-box;
    justify-content: flex-start;

    .li {
        width: 336px;
        position: relative;

        .title {
            margin: 20px 0 16px;
            line-height: 28px;
        }

        margin-bottom: 40px;
        margin-right: 16px;

        img {
            width: 336px;
            height: 339px;
            display: block;
        }
    }
}

.paixuBox {

    .btn{
        width: 72px;
height: 32px;
background: #FFC047;
line-height: 32px;
text-align: center;
margin-left: 20px;
    }
    .priceBox {
        margin-left: 79px;

        /deep/.el-input-group__append,
        /deep/.el-input-group__prepend,
        /deep/.el-input__wrapper {
            background-color: #fff;
            box-shadow: none;
        }

        /deep/.el-input-group__prepend {
            padding: 0;
        }

    }

    width: 1472px;
    height: 58px;
    // line-height: 58px;
    background: #F5F5F5;
    border: 1px solid #CCCCCC;
    margin: 20px 0;

    .active {
        color: #DD2131;
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
    }

    .li {
        width: 140px;
        align-items: center;
        height: 58px;
        position: relative;

    }
}

.navTag {
    margin-top: 20px;
    // width: 100%;
    width: 1472px;
    border-bottom: 2px solid #DD2131;

    .activetag {
        background: #DD2131;
        color: #fff;
    }

    span {
        display: block;
        width: 140px;
        height: 48px;
        line-height: 48px;
        text-align: center;
    }
}

.topsearch {
    .left {
        .favi {
            width: 68px;
            text-align: center;
            line-height: 32px;
            height: 32px;
            background: #DD2131;
            border-radius: 36px;
        }

        img {
            width: 200px;
            height: 94px;
        }

        // margin-right: 90px;
    }

    .right {


        .inputBox {
            width: 683px;
            height: 48px;
            border: 2px solid #DD2131;
            padding-left: 20px;
            box-sizing: border-box;

            input {
                height: 41px;
                flex: 1;
                border: none;
                outline: none;
            }

            .seacrhIcon {
                width: 75px;
                height: 48px;
                background: #DD2131;
                display: flex;
                align-items: center;
                position: relative;
                right: -1px;

                img {
                    width: 29.97px;
                    height: 29.97px;
                    margin: 0 auto;
                }
            }
        }

    }
}
</style>
